<template>
	<view class="service-container">

		<view class="section">
			<text class="section-title">待缴费项目</text>
			<view class="payment-list">
				<view v-for="(item, index) in paymentItems" :key="index" class="payment-item">
					<view class="payment-info">
						<text class="payment-name">{{ item.name }}</text>
						<text class="payment-date">{{ item.date }}</text>
						<text class="payment-dept">{{ item.department }}</text>
					</view>
					<view class="payment-amount">
						<text>¥{{ item.amount.toFixed(2) }}</text>
						<checkbox :checked="item.selected" @click="togglePaymentItem(index)"></checkbox>
					</view>
				</view>
			</view>
		</view>

		<view class="payment-summary">
			<text>已选{{ selectedPaymentCount }}项，合计：</text>
			<text class="total-amount">¥{{ totalAmount.toFixed(2) }}</text>
		</view>

		<view class="payment-method">
			<text class="section-title">支付方式</text>
			<radio-group @change="onPaymentMethodChange">
				<label v-for="(method, index) in paymentMethods" :key="index" class="method-item">
					<radio :value="method.value" :checked="method.checked" />
					<image class="method-icon" :src="method.icon"></image>
					<text>{{ method.name }}</text>
				</label>
			</radio-group>
		</view>

		<button class="submit-button" :disabled="totalAmount <= 0" @click="submitPayment">确认支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentItems: [{
						name: '挂号费',
						date: '2025-03-22',
						department: '内科',
						amount: 20,
						selected: false
					},
					{
						name: '检验费',
						date: '2025-03-22',
						department: '检验科',
						amount: 120,
						selected: false
					},
					{
						name: '药品费',
						date: '2025-03-22',
						department: '药房',
						amount: 85.5,
						selected: false
					},
				],
				paymentMethods: [{
						name: '微信支付',
						value: 'wechat',
						icon: '/static/wechat-pay.png',
						checked: true
					},
					{
						name: '支付宝',
						value: 'alipay',
						icon: '/static/alipay.png',
						checked: false
					},
					{
						name: '医保支付',
						value: 'insurance',
						icon: '/static/insurance.png',
						checked: false
					},
				],
				selectedPaymentMethod: 'wechat',
			}
		},
		computed: {
			selectedPaymentCount() {
				return this.paymentItems.filter(item => item.selected).length;
			},
			totalAmount() {
				return this.paymentItems.reduce((sum, item) => {
					return item.selected ? sum + item.amount : sum;
				}, 0);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			togglePaymentItem(index) {
				this.paymentItems[index].selected = !this.paymentItems[index].selected;
			},
			onPaymentMethodChange(e) {
				this.selectedPaymentMethod = e.detail.value;
			},
			submitPayment() {
				if (this.totalAmount <= 0) {
					uni.showToast({
						title: '请选择缴费项目',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '支付中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			}
		}
	}
</script>

<style>
	.service-container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.back-button {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #3295e6;
	}

	.section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.payment-list {
		max-height: 600rpx;
		overflow-y: auto;
	}

	.payment-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.payment-info {
		display: flex;
		flex-direction: column;
	}

	.payment-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.payment-date,
	.payment-dept {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.payment-amount {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b6b;
	}

	.payment-summary {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.total-amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b6b;
		margin-left: 10rpx;
	}

	.payment-method {
		background-color: white;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.method-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.method-icon {
		width: 48rpx;
		height: 48rpx;
		margin: 0 20rpx;
	}

	.submit-button {
		background-color: #3295e6;
		color: white;
		border-radius: 12rpx;
		padding: 20rpx 0;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.submit-button[disabled] {
		background-color: #ccc;
	}
</style>